//@for $i from 1 through 12{
//  .col-xs-#{$i}{
//    width:percentage($i/12);
//  }
//}
@import "app.base";
*{
  margin:0;
  padding:0;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
html, body{
  height:100%;
}
.container{
  width: rem(3435);
  height: 100vh;
  background:$info;
  @at-root .app-hd{
    position: fixed;
    left:0;
    top:0;
    right: 0;
    line-height:60px;
    text-align:center;
    background-color:$mainColor;
    color:#fff;
    z-index: 9;
  }
  @at-root .app-bd{
    padding:60px 0;
    box-sizing: border-box;
    background-color:#000;
    color:#fff;
    min-height:100vh;
    #test{
      width:100px;
      height: 100px;
      @include br(5px);
      background-color:#e6a23c;
      position: relative;
      &::before,&::after{
        content:'';
        display: inline-block;
        width: 14px;
        height: 14px;
        @include br(50%);
        background: #fff;
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
      }
      &::after{
        left: unset;
      }
    }
    .test{
      @extend #test;
      background-color:chartreuse;
    }
    .icon{
      width: 200px;
      height: 200px;
      overflow: hidden;
      background-size:cover;
      background-repeat: no-repeat;
    }
    @each $fruit in apple orange tomato pear banana {
      .icon-#{$fruit}{
        background-image:url("./img/icon/#{$fruit}.png");
      }
    }
  }
  @at-root .app-ft{
    background:#f56c6c;
    position:fixed;
    z-index: 9;
    left:0;
    bottom:0;
    right:0;
    height:60px;
    font-size: 0;
    @at-root .app-ft__item{
      font-size: 16px;
      display:inline-block;
      width: 25%;
      line-height:60px;
      text-align: center;
      color:#fff;
      &:hover{
        background-color:$mainColor;
      }
    }
  }
}

